<template>
	<section>
		<div class="video-ranking-box">
			<!-- video op -->
			<div class="video-shell" v-for="(item,index) in res_data" :key="item.aid">
				<div class="video-ranking clear" :style="index === 0 && 'border: none'">
					<div class="video-view">
						<router-link :to="{path: `/channel/${item.menu_id}/${item.aid}`}" target="_blank" class="video-link">
							<div class="video-view-ranking">
								<div class="video-img">
									<img :src="imgBaseUrl+item.pic" alt="" />
								</div>
								<div class="video-info">
									<span :class="`icon-from icon-from-${item.pub_platform}`"></span>
									<span class="video-minutes">{{item.minute}}</span>
								</div>
							</div>
						</router-link>
					</div>
					<div class="video-info-box">
						<router-link :to="`/video/${item.aid}`" target="_blank" class="video-title video-link" >{{item.title}}</router-link>
						<div class="video-info">
							<span :class="item.storeClass" @click="storeFn(item)">{{item.store_num}}</span>
							<span :class="item.good" @click="goodFn(item)">{{item.good_num}}</span>
						</div>
					</div>
				</div>
			</div>
			<!-- video ed -->
		</div>
	</section>
</template>

<script>
import { billboard, updategood, storefrontAdd, imgBaseUrl } from '@/api';
import { utilStore, utilGood } from '@/util/util'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			res_data: [],
			imgBaseUrl,
		}
	},
	props: ['menuId'],
	watch: {
		menuId(){
			this.getResData();
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	mounted() {
		this.getResData();
	},
	methods: {
		...mapMutations([
			'DIALOG_LOGIN',
		]),
		// 收藏 
		storeFn(item){
			utilStore(item, this, 'res_data', storefrontAdd);
		},
		goodFn(item){
			utilGood(item, this, 'res_data', updategood);
		},
		getResData(){
			let para={
				menu_id: this.menuId||11,
				user_id: this.userInfo?this.userInfo.user_id:'',
			};

			billboard(para).then(res => {
				if(res.data){
					let data = res.data; 
					for(let i =0;i<data.length; i++){
						data[i].storeClass = data[i].store!=1?'icon-bg icon-store-o':'icon-bg icon-store';'icon-bg icon-store-o';
						data[i].good = 'icon-bg icon-good-o';
						data[i].goodcan = true;
					}
					this.res_data = data
				}
			});
		}
	}
}
</script>

<style scoped lang="scss">
.video-ranking-box {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 4px rgba(0,0,0,.2);
	.video-shell {
		padding: 0 10px;
		.video-ranking {
			border-top: 1px solid #ededed;
			padding: 30px 0px 30px 40px;
			width: 100%;
			.video-view{
				float: left;
				width: 285px;
				.video-view-ranking{
					position: relative;
					width: 100%;
					height: 0;
					padding-bottom: 56.25%;
					overflow: hidden;
					.video-img {
						position: absolute;
						z-index: 1;
						transition: all .2s linear;
						-webkit-transition: all .2s linear;
					}
				}
				.video-info {
					position: absolute;
					bottom: 6px;
					left: 6px;
					z-index: 2,
				}
				.video-minutes {
					vertical-align: middle;
					padding-left: 4px;
					font-size: 12px;
					color:#fff;
				}
			}
			.video-view:hover {
				.video-img {
					-webkit-transform: scale(1.05);
					transform: scale(1.05);
				}
			}

			.video-info-box {
				float: left;
				padding-top: 20px;
				padding-left:30px;
				width: 400px;
				.video-info {
					padding-top: 20px;
					font-size: 12px;
				}
				
				.icon-store-o{
					background-position: 0 -144px;
				}
				.icon-good-o{
					background-position: 0 -128px;
				}
				.icon-store,.icon-store-o:hover{
					background-position: 0 -48px;
				}
				.icon-good,.icon-good-o:hover {
					background-position: 0 -16px;
				}
			}
			.video-title {
				// height: 18px;
				line-height: 25px;
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}
			.video-title:hover {
				color: #f86254;
			}
		}
	}
}
</style>